<template>
    <!-- <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    <HelloWorld msg="Vite + Vue" /> -->
    <div class="common-layout">
      <el-container>
        <el-header style="padding: 0px;">
          <div style="height: 200px;">
            <img src="../assets/bannar.jpg" style="object-fit:cover;width: 100%;height:200px;" />
            <div style="display: flex;position:absolute;left:12% ;top:0px">
              <h3 style="color: green;font-size: 40px;">工程管理信息网</h3>
            </div>
          </div>
        </el-header>
        <el-container>
          <el-aside width="400px" style="padding: 0px;">
            <div style="height: 300px;">
              <Lanwuxinxi />
            </div>
            <div style="height: 500px;background-color: transparent;">
              <Baojing />
            </div>
          </el-aside>
          <el-main style="padding: 0px;min-width: 400px;">
            <div style="background-color: transparent;height: calc((100vh - 206px) / 2);min-height: 300px;">
              <Earth />
            </div>
            <div
              style="padding-top:8px;padding-left: 10px;box-sizing: border-box;height: 40px;background-image: url('http://jsgl.zfcxjw.cq.gov.cn:6087/webcqjgNew/images/Infotitle_bg.jpg');background-size:cover;">
              业绩公告</div>
            <div style="padding-left: 10px;padding-top: 10px;">
              <div style="padding-bottom: 10px;font-size:12px;flex-direction: row;display: flex;"
                v-for="item in gonggaos">
                <span style="">{{ item.name }}</span>
                <span style="flex: 1;"></span>
                <span>{{ item.date }}</span>
                <span style="width:10px"></span>
              </div>
            </div>
            <Jiankong />
          </el-main>
          <el-aside width="400px">
            <div style="height: 300px;">
              <PmNongDu />
            </div>
            <YinHuan />
          </el-aside>
        </el-container>
      </el-container>
    </div>
  </template>
  <script setup lang="ts">
  // import HelloWorld from './components/HelloWorld.vue'
  import Baojing from '../components/Baojing.vue';
  import Earth from '../components/Earth.vue';
  import Lanwuxinxi from '../components/Lanwuxinxi.vue';
  import PmNongDu from '../components/PmNongDu.vue';
  import YinHuan from '../components/YinHuan.vue';
  import Jiankong from '../components/Jiankong.vue';
  const gonggaos = [
    {
      "name": "南川区古花乡中心小学校建设周转宿舍建设项目",
      "date": "2024-07-26"
    },
    {
      "name": "木洞移民迁建集镇小区综合帮扶项目",
      "date": "2024-07-26"
    },
    {
      "name": "和黄南岸区南坪镇杨家山片区商住项目（三期）14号地块总承包B分区综合机电专业分包工程",
      "date": "2024-07-26"
    },
    {
      "name": "和记黄埔地产（经开园）有限公司北部新区经开园陡溪片区B17路西侧地块项目乙区第一分区总包工程",
      "date": "2024-07-26"
    },
    {
      "name": "嘉陵·春和景明二标段（b2-b6#及B区地下车库）",
      "date": "2024-07-26"
    },
    {
      "name": "公共运输职业学院工程",
      "date": "2024-06-14"
    },
  ]
  </script>
  <style scoped>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  
  .logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
  }
  
  :deep(.el-header) {
    height: min-content;
    padding: 0px;
  }
  
  .common-layout {
    min-height: 800px;
  }
  
  :deep(.el-aside) {
    /* background-color: blanchedalmond; */
  }
  
  div {
    /* text-align: center; */
  }
  </style>
  